<?php $this->load->view('header');?>
<body class="childrenBody" style="background-color: #f2f4f8">

<div class="m_top" style="height: 700px;">
	<div class="_data_title">
		<b>图表</b>
	</div>
	<div class="" style="padding: 30px 0;">
		<div style="width: 33%;float: left;text-align: center;border-right: 1px solid #e3e8f0;">
			<p style="font-weight: 700;font-family: inherit;font-size: 1rem;color: #212121;line-height: 1.6;"><?=$course_num?></p>
			<p>&nbsp;</p>
			<p>总课程数</p>
		</div>
		<div class="large-3 columns" style="width: 33%;float: left;text-align: center;border-right: 1px solid #e3e8f0;">
			<p class="t1" style="font-weight: 700;font-family: inherit;font-size: 1rem;color: #212121;line-height: 1.6;"><?=$month_num?></p>
			<p>&nbsp;</p>
			<p class="t3">本月新课程数</p>
        </div>
		<div class="large-3 columns" style="width: 33%;float: left;text-align: center;">
			<p class="t1" style="font-weight: 700;font-family: inherit;font-size: 1rem;color: #212121;line-height: 1.6;"><?=$app_num?></p>
			<p>&nbsp;</p>
			<p class="t3">预约次数</p>
		</div>
	</div>
	<div style="padding-top: 140px;">
		<div class="layui-btn-group" style="padding:0 0 20px 30px;">
			<button class="layui-btn layui-btn-primary layui-btn-small Ninety clickbtclass">近90天</button>
			<button class="layui-btn layui-btn-primary layui-btn-small ThirtyBtn">近30天</button>
			<button class="layui-btn layui-btn-primary layui-btn-small Fifteen">近15天</button>
			<button class="layui-btn layui-btn-primary layui-btn-small Seven">近7天</button>
		</div>
		<div class="layui-inline" style="padding-bottom: 20px;">
		  <div class="layui-input-inline">
		    <input type="text" class="layui-input" id="test" placeholder="选择时间段" style="height: 32px;">
		  </div>
		</div>
		<div id="container"></div>
	</div>
	
</div>

<div style="margin: 40px 30px;">
	<div style="height: 100px;background-color: #fff;border: 1px solid #e3e8f0;">
		<div style="padding: 20px 0 10px 20px;">
			<form class="layui-form" action="" style="display: inline;">
				<div class="layui-input-inline">
			    	<select name="venue_id" id="venue_id">
					  <option value="-1">全部场馆</option>
					  <?php foreach ($venue_list as $item):?>
					  <option value="<?=$item['id']?>"><?=$item['name']?></option>
					  <?php endforeach;?>
					</select> 
			    </div>
				<div class="layui-input-inline">
			    	<select name="coach_id" id="coach_id">
					  <option value="-1">全部教练</option>
					  <?php foreach ($coach_list as $item):?>
					  <option value="<?=$item['id']?>"><?=$item['nickname']?></option>
					  <?php endforeach;?>
					</select> 
			    </div>
			    <div class="layui-inline">
			      <div class="layui-input-inline">
			        <input type="text" class="layui-input" id="test1" placeholder="选择查询时间">
			      </div>
			    </div>
			    <div class="layui-input-inline">
			    	<input type="text" name="keyword" value="" placeholder="搜课程名称" class="layui-input search_input">
			    </div>
			    <a class="layui-btn layui-btn-normal Sear_btn"><i class="layui-icon">&#xe615;</i>查询</a>
			</form>
		</div>
		<p style="padding-left: 20px;">总计：私教预约<span id="unum"></span>人。</p>
	</div>
	<table class="layui-table" lay-even="" lay-skin="line" style="margin-top: 0;">
	    <thead>
			<tr>
				<th>日期</th>
				<th>教练</th>
				<th>课程名称</th>
				<th>上课时间</th>
				<th>预约人次</th>
				<th>课程价格</th>
			</tr> 
	    </thead>
		<tbody class="goods_content" id="view">
		</tbody>
	</table>
	<div class="page_box" style="float: right;padding-right: 10px;">
		<div id="listpage"></div>
	</div>
</div>

<!-- 模板 -->
<script id="demo" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<tr>
		  <td>{{ item.addtime }}</td>
		  <td>{{ item.nickname }}</td>
		  <td>{{ item.course_name }}({{ item.card_name }})</td>
		  <td>{{ item.stime }}</td>
		  <td>{{ item.num }}</td>
		  <td>{{ item.price }}</td>
		</tr>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
      暂无数据
    {{#  } }} 
</script>

<script>
layui.config({
	version: true
}).use(['element','jquery','layer', 'laytpl', 'form', 'laydate', 'laypage'], function(){
  var layer = parent.layer === undefined ? layui.layer : parent.layer,
		element = layui.element,
		laytpl = layui.laytpl,
		laydate = layui.laydate,
		form = layui.form,
		laypage = layui.laypage,
		$ = layui.jquery;

		var date=new Date();
		var maxDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDate()-1); //获取当前年份

		load_data_list(90);
		load_appoint_list();

		//近90天
		$('.Ninety').click(function(event) 
		{
			load_data_list('90');
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".Ninety").addClass('clickbtclass');
			$(".Fifteen").removeClass('clickbtclass');
			$(".Seven").removeClass('clickbtclass');
		});


		//近30天
		$('.ThirtyBtn').click(function(event) 
		{
			load_data_list('30');
			$(".ThirtyBtn").addClass("clickbtclass");
			$(".Ninety").removeClass('clickbtclass');
			$(".Fifteen").removeClass('clickbtclass');
			$(".Seven").removeClass('clickbtclass');
		});

		//近15天
		$('.Fifteen').click(function(event) 
		{
			load_data_list('15');
			$(".Fifteen").addClass('clickbtclass');
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".Ninety").removeClass('clickbtclass');
			$(".Seven").removeClass('clickbtclass');
		});


		//近7天
		$('.Seven').click(function(event) 
		{
			load_data_list('7');
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".Ninety").removeClass('clickbtclass');
			$(".Fifteen").removeClass('clickbtclass');
			$(".Seven").addClass('clickbtclass');
		});


		//日期范围
		laydate.render({
			elem: '#test'
			,range: true
			,max: maxDate
			,btns: ['confirm']
		    ,done: function(value, date, endDate)
		    {
		    	load_data_list(value);
				$(".ThirtyBtn").removeClass("clickbtclass");
				$(".Ninety").removeClass('clickbtclass');
				$(".Fifteen").removeClass('clickbtclass');
				$(".Seven").removeClass('clickbtclass');
		    }
		});

		var md = (date.getMonth()+1) >= 10 ? (date.getMonth()+1) : '0'+(date.getMonth()+1);
		var dd = date.getDate() >= 10 ? date.getDate() : '0'+date.getDate();
		var fristd = date.getFullYear()+"-"+md+'-01'; 
		var endd = date.getFullYear()+"-"+md+"-"+dd;
		var dstr = fristd+' - '+endd;
		//日期范围
		laydate.render({
			elem: '#test1'
			,range: true
			,value: dstr
			,btns: ['confirm']
		    ,done: function(value, date, endDate)
		    {
		    	dstr = value;
		    }
		});


		//查询
		$('.Sear_btn').click(function(event) 
		{
			var vid = $('#venue_id').val();
			var cid = $('#coach_id').val();
			var kw= $("input[name='keyword']").val();

			load_appoint_list(vid,cid,dstr,kw);
		});

		function load_data_list(dtnum)
		{
			$.get('admin.php/CourseReport/course_appoint',{date_num:dtnum}, function(data) 
			{
				if (data.status == 200) 
				{
					var d = data.appoint_num;
					var m = [];	
					for (var i = 0; i < d.length; i++) {
						m.push(parseInt(d[i]));
					}

					var chart = Highcharts.chart('container', {
			                title: {
			                    text:null,
			                },
			                chart: {
								type:'spline'
							},
			                xAxis:{
			                	categories: data.date_list
			                },
			                yAxis: {
			                   title:'',
			                   allowDecimals:false
			                },
			                legend: {
			                    enabled: false
			                },
			                credits: {
			                    enabled: false
			                },
			                exporting: {
			                    enabled: false
			                },
			                series: [{
			                        name: '预约数',
			                        data: m
			                }],
			                colors: ['#0cc3aa','#0f8df2'],
			        });

				}

			},'json');

		}

		//获取预约记录
		function load_appoint_list(v,c,d,k,p)
		{
			$.get('admin.php/CourseReport/user_appoint',{venue_id:v,coach_id:c,dates:d,keyword:k,page:p}, function(data) 
			{
				var getTpl = demo.innerHTML;
				laytpl(getTpl).render(data, function(html){
				  $('#view').html(html);
				});

				$('#unum').html(data.count);


				layui.each(data.list, function(index, el) 
				{
					//分页
					laypage.render({
					  elem: 'listpage'
					  ,count: data.count //数据总数，从服务端得到
					  ,theme: '#1E9FFF'
					  ,limit: 50
					  ,curr:p
					  ,jump: function(obj, first){
					    //首次不执行
					    if(!first){
					      load_appoint_list(v,c,d,k,obj.curr);
					    }
					  }
					});

					form.render(); //更新全部
				});

			},'json');
		}

});
</script>
</body>
</html>